<!-- 忘记密码 -->
<template>
  <div class="forgot-password">
    <van-nav-bar title="忘记密码" @click-left="() => $router.go(-1)" left-arrow safe-area-inset-top>
    </van-nav-bar>

    <div class="form">
      <van-form ref="form">
        <van-field center v-model="form.phone" name="手机号" maxlength="11" type="tel" placeholder="请输入手机号" autocomplete="off"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/手机 (1).png" alt="" />
            </div>
          </template>
        </van-field>
        <van-field v-model="form.code" type="number" name="验证码" placeholder="请输入验证码" autocomplete="off"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/验证码.png" alt="" />
            </div>
          </template>
          <template #button>
            <van-button plain native-type="button" size="small" type="info" :disabled="disabled" round @click="getCode">
              {{ codeMsg }}</van-button>
          </template>
        </van-field>
        <van-field center v-model="form.password" :type="type1" name="密码" placeholder="请输入密码" autocomplete="off"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/密码.png" alt="" />
            </div>
          </template>
          <template #right-icon>
            <van-icon v-if="type1 == 'password'" name="closed-eye" @click="click1(1)" />
            <van-icon v-else name="eye-o" @click="click1(1)" />
          </template>
        </van-field>
        <van-field center v-model="form.password1" :type="type2" name="密码" placeholder="请输入确认密码"
          :rules="[{ required: true, message: '' }]">
          <template #left-icon>
            <div class="icon">
              <img src="../../assets/images/user/密码.png" alt="" />
            </div>
          </template>
          <template #right-icon>
            <van-icon v-if="type2 == 'password'" name="closed-eye" @click="click1(2)" />
            <van-icon v-else name="eye-o" @click="click1(2)" />
          </template>
        </van-field>
      </van-form>
    </div>
    <div class="reg">
      <div @click="() => $router.push({ path: '/login' })">登 录</div>
      <div @click="() => $router.push({ path: '/register' })">注 册</div>
    </div>
    <div class="bottom">
      <van-button round block type="info" @click="onSubmit"
        color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))" style="font-size: 20px">重置密码</van-button>
    </div>
  </div>
</template>

<script>
import { findPass, getCode } from "../../api/index";
export default {
  name: "",
  data() {
    return {
      swit: true,
      disabled: false,
      codeNum: null,
      codeMsg: "获取验证码",
      form: {
        code: "",
        phone: "",
        password: "",
        password1: "",
      },
      type1: "password",
      type2: "password",
    };
  },
  methods: {
    // 获取验证码
    getCode() {
      this.$refs.form
        .validate("手机号")
        .then(async () => {
          // 验证通过
          console.log("通过");
          let res = await getCode({ phone: this.form.phone });

          // 禁用按钮
          this.disabled = true;
          this.codeNum = 60;
          // 倒计时
          let timer = setInterval(() => {
            if (this.codeNum == 0) {
              clearInterval(timer);
              this.disabled = false;
              this.codeMsg = "获取验证码";
            } else {
              --this.codeNum;
              this.codeMsg = `重新获取(${this.codeNum})`;
            }
          }, 1000);
        })
        .catch(() => {
          // 验证不通过
        });
    },
    onSubmit(values) {
      var that = this;
      console.log("submit", this.$refs.form);
      this.$refs.form
        .validate()
        .then(async (res) => {
          // 表单验证通过
          console.log("通过");
          if (this.form.password != this.form.password1) {
            this.$toast("两次输入密码不一致");
          } else {
            let res = await findPass(this.form);
            if (res.status == 200) {
              this.$toast(res.message);
              setTimeout(() => {
                that.$router.back()
              }, 500);

            } else {

              this.$toast(res.message);

            }
          }
        })
        .catch((err) => {
          // 表单验证不通过
          console.log("cuole", err);
        });
    },
    click1(val) {
      this["type" + val] == "password"
        ? (this["type" + val] = "text")
        : (this["type" + val] = "password");
    },
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.forgot-password {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  position: relative;

  .form {
    width: 90%;
    border: 1px solid #eee;
    margin: 50px auto;
    box-shadow: 0 0 10px rgb(223, 237, 248);
    border-radius: 15px;

    .icon {
      width: 100px;
      text-align: center;
      border-right: 1px solid #daf2fd;
      margin-right: 20px;

      img {
        width: 50px;
        height: 50px;
      }
    }
  }

  .reg {
    width: 90%;
    display: flex;
    justify-content: space-between;
    color: rgb(113, 113, 113);
    margin: 0 auto;
  }

  .bottom {
    margin: 16px;
    width: 90%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    bottom: 5%;
    left: 2.5%;
  }
}
</style>